<script setup>
import { ref } from 'vue'
import dataDetailsTable from './dataDetailsTable.vue'
const props = defineProps({
	modelVisible: Boolean,
	dataSort: Number
})
const tableData = ref([])
const activeKey = ref(1)
const emits = defineEmits(['showModel'])
</script>
<template>
	<div class="model-box">
		<el-dialog
			v-model="props.modelVisible"
			title="查看详情"
			@close="emits('showModel', false)"
			width="1200px"
			:center="true"
		>
			<div v-if="props.dataSort === 0" class="user flex-row">
				<div class="info flex-row">
					<div class="avatar-component flex-row">
						<img src="https://wework.qpic.cn/wwpic/186339_3kO_N4tbShSL3lF_1665369145/60" class="avatar-img" />
						<div class="avatar-name">
							<p>夏小飞</p>
							<p>所在部门： 风雅</p>
						</div>
						<el-divider style="height: 33px; margin: 0 31px" direction="vertical" />
						<p class="now-rank">当前排名：<span class="text-blue">1</span></p>
					</div>
				</div>
				<el-button class="btn-details">查看成员详情</el-button>
			</div>
			<el-tabs v-model="activeKey" type="border-card">
				<el-tab-pane label="添加客户数" :name="1"
					><dataDetailsTable :activeKey="activeKey" :tableData="tableData" :dataSort="props.dataSort" />
				</el-tab-pane>
				<el-tab-pane label="流失客户数" :name="2"
					><dataDetailsTable :activeKey="activeKey" :tableData="tableData" :dataSort="props.dataSort" />
				</el-tab-pane>
				<el-tab-pane label="净增客户数" :name="3"
					><dataDetailsTable :activeKey="activeKey" :tableData="tableData" :dataSort="props.dataSort"
				/></el-tab-pane>
			</el-tabs>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/groupManagement/codeCommon.scss';

.text-blue {
	color: #1890ff;
}
.user {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px dashed #e9ebf3;
	justify-content: space-between;
	.avatar-img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.avatar-component {
		align-items: flex-start;
		font-size: 13px;
		color: rgba(0, 0, 0, 0.45);
		.avatar-name {
			p:first-child {
				margin-top: -3px;
			}
		}
		.now-rank {
			font-size: 14px;
			color: rgba(0, 0, 0, 0.65);
			align-self: center;
		}
	}
	.btn-details {
		width: 118px;
		height: 36px;
		color: #1890ff;
		border-color: #1890ff;
	}
}
</style>
